
<!DOCTYPE HTML><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="images/splash/splash-icon-big.png">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 	media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six-plus.png" media="(device-width: 414px)">
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>

<title>Epsilon Mobile Framework - Version 2.0</title>

<link href="styles/style.css"     		 rel="stylesheet" type="text/css">
<link href="styles/framework.css" 		 rel="stylesheet" type="text/css">
<link href="styles/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="styles/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="styles/animate.css"			 rel="stylesheet" type="text/css">

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

</head>
<body> 

<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>
    
       
<div class="all-elements">
    <div class="snap-drawers">
        <!-- Left Sidebar -->
        <div class="snap-drawer snap-drawer-left">
            <a href="index.html"><i class="fa fa-home"></i>Home</a>
            <a href="page-features.html" class="selected-item"><i class="fa fa-cog"></i>Features</a>
            <a href="page-media.html"><i class="fa fa-picture-o"></i>Media</a>
            <a href="page-blog.html"><i class="fa fa-pencil"></i>Blog</a>
            <a href="contact.html"><i class="fa fa-envelope-o"></i>Contact</a>
            <a href="#"><i class="fa fa-facebook"></i>Like Us</a>
            <a href="#"><i class="fa fa-twitter"></i>Follow Us</a>
            <a href="#"><i class="fa fa-google-plus"></i>Follow us</a>
            <a href="#" class="show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
            <a href="#" class="sidebar-close"><i class="fa fa-times"></i>Close</a>
        </div>
    </div>
    
    <div class="header">
        <a href="#" class="main-logo"></a>
        <a href="#" class="open-menu"><i class="fa fa-navicon"></i></a>
        <a href="#" class="open-call"><i class="fa fa-phone"></i></a>
        <a href="#" class="open-mail"><i class="fa fa-envelope-o"></i></a>
        <a href="page-features.html" class="open-back"><i class="fa fa-chevron-left"></i></a>
    </div> 
    
    <a href="#" class="footer-ball"><i class="fa fa-navicon"></i></a>
    
    <!-- Page Content-->
    <div id="content" class="snap-content">        
        <div class="header-clear"></div>
        <div class="content">
            <a class="back-button" href="page-features.html"><i class="fa fa-chevron-left"></i> Back to Features</a>
            
            <div class="container no-bottom">
                <h3>Typography</h3>
                <p>
                    Features that are vital to any template, easy to use and copy paste code. You can just copy and paste these features
                    into boxes or into repsonsive boxes! 
                </p>
            </div>
            
            <div class="decoration"></div>
            
            <div class="container no-bottom">
                <p>
                    1/1<br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                    Proin luctus congue sodales. Pellentesque vel mollis odio, ac facilisis arcu. 
                    Etiam rutrum sem non risus condimentum, quis iaculis ligula facilisis.       
                </p>  
            </div>
            
            <div class="decoration"></div>
            
            <div class="container no-bottom">
                <p>
                    1/1<br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                    Proin luctus congue sodales. Pellentesque vel mollis odio, ac facilisis arcu. 
                    Etiam rutrum sem non risus condimentum, quis iaculis ligula facilisis.       
                </p>
                
                <div class="decoration"></div>

                <div class="one-half">
                    <p>
                        1/2<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. Pellentesque vel mollis odio. 
                     </p>
                </div>
                <div class="two-half last-column">
                    <p>
                        2/2<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. Pellentesque vel mollis odio. 
                    </p>        
                </div>
                <div class="decoration"></div>
                <div class="one-third">
                    <p>
                        1/3<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. 
                     </p>
                </div>
                <div class="one-third">
                    <p>
                        2/3<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales.  
                    </p>        
                </div>
                <div class="one-third last-column">
                    <p>
                        3/3<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. 
                    </p>        
                </div>
            </div>
            
            <div class="decoration"></div> 
            
            <div class="container no-bottom">
                <h3>Sample of text highlights</h3>
                <p>Text highlights are an awesome way to emphesize something important you want to show off!</p>
                <div class="one-half-responsive">
                    <p><span class="text-highlight highlight-turqoise">This is a highlight</span>and this is the text</p>
                    <p><span class="text-highlight highlight-green">This is a highlight</span>and this is the text</p>
                    <p><span class="text-highlight highlight-blue">This is a highlight</span>and this is the text</p>
                    <p><span class="text-highlight highlight-magenta">This is a highlight</span>and this is the text</p>
                </div>
                <div class="one-half-responsive last-column">
                    <p><span class="text-highlight highlight-dark">This is a highlight</span>and this is the text</p>
                    <p><span class="text-highlight highlight-yellow">This is a highlight</span>and this is the text</p>
                    <p><span class="text-highlight highlight-red">This is a highlight</span>and this is the text</p>
                    <p><span class="text-highlight highlight-orange">This is a highlight</span>and this is the text</p>
                </div>
            </div> 
            
            <div class="decoration"></div>
            
            <div class="container no-bottom">
                    <h3>Icon lists</h3>
                    <p>Icon lists are absolutely awesome! They are very simple to use and they're retina!</p>
                    <div class="one-half">
                        <ul class="icon-list">
                            <li class="address-list">Address icon</li>
                            <li class="block-list">Block icon</li>
                            <li class="bookmark-list">Bookmark icon</li>
                            <li class="briefcase-list">Briefcase icon</li>
                            <li class="bubble-list">Bubble icon</li>
                            <li class="buy-list">Buy icon</li>
                            <li class="calendar-list">Calendar icon</li>
                            <li class="clipboard-list">Clipboard icon</li>
                            <li class="clock-list">Clock icon</li>
                            <li class="delete-list">Delete icon</li>
                            <li class="diagram-list">Diagram icon</li>
                            <li class="document-list">Document icon</li>
                            <li class="down-list">Down icon</li>
                            <li class="flag-list">Flag icon</li>
                            <li class="folder-list">Folder icon</li>
                            <li class="gear-list">Gear icon</li>
                            <li class="globe-list">Globe icon</li>
                            <li class="heart-list">Heart icon</li>
                            <li class="help-list">Help icon</li>
                            <li class="info-list">Info icon</li>
                            <li class="key-list">Key icon</li>              
                        </ul>
                    </div>
                    <div class="one-half last-column">
                        <ul class="icon-list">
                            <li class="left-list">Left icon</li>
                            <li class="letter-list">Letter icon</li>
                            <li class="monitor-list">Monitor icon</li>
                            <li class="pencil-list">Pencil icon</li>
                            <li class="plus-list">Plus icon</li>
                            <li class="present-list">Present icon</li>
                            <li class="print-list">Print icon</li>
                            <li class="right-list">Right icon</li>
                            <li class="save-list">Save icon</li>
                            <li class="search-list">Search icon</li>
                            <li class="shield-list">Shield icon</li>
                            <li class="statistics-list">Statistics icon</li>
                            <li class="stop-list">Stop icon</li>
                            <li class="tick-list">Tick icon</li>
                            <li class="trash-list">Trash icon</li>
                            <li class="up-list">Up icon</li>
                            <li class="user-list">User icon</li>
                            <li class="wallet-list">Walet icon</li>
                            <li class="warning-list">Warning icon</li>
                            <li class="home-list">Home icon</li>
                            <li class="label-list">Label icon</li>  
                        </ul>
                    </div>
                </div>   
            
                <div class="container no-bottom">
                    <div class="one-third">
                        <ul class="normal-list">
                            <li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                            <li>List item 4</li>
                            <li>List item 5</li>
                        </ul>
                    </div>
                    <div class="one-third">
                        <ol class="number-list">
                            <li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                            <li>List item 4</li>
                            <li>List item 5</li>
                        </ol>
                    </div>
                    <div class="one-third last-column">
                        <ul class="font-icon-list">
                            <li><i class="fa fa-facebook"></i>Facebook</li>
                            <li><i class="fa fa-twitter"></i>Twitter</li>
                            <li><i class="fa fa-spinner fa-spin"></i>Spinner</li>
                            <li><i class="fa fa-phone"></i>Phone</li>
                            <li><i class="fa fa-tablet"></i>Tablet</li>
                        </ul>
                    </div>
                </div>
            
                <div class="decoration"></div>
            
                <div class="container no-bottom">
                    <h3>Code structures</h3>
                    <p>Maybe you're a developer and want to add code, maybe not, it's still an included option!</p>
                    <div class="code">
                        <span class="wline"> &lt;p class="test1"&gt;Simple code!&lt;/p&gt;</span>
                        <span class="gline"> &lt;p class="test2"&gt;Simple code!&lt;/p&gt;</span>
                    </div>      
                </div>
            
            <div class="decoration"></div>

            <div class="container no-bottom">
                <h3>Simple notifications!</h3>
                <p>These notifications can be shown but they cannot be dismissed by tapping or closing!</p>
                <div class="one-half-responsive">
                    <div class="static-notification-red">
                        <p class="center-text uppercase">Red notification!</p>
                    </div>
                    <div class="static-notification-green">
                        <p class="center-text uppercase">Green notification!</p>
                    </div>
                </div>
                <div class="one-half-responsive last-column">
                    <div class="static-notification-yellow">
                        <p class="center-text uppercase">Yellow notification!</p>
                    </div>
                    <div class="static-notification-blue">
                        <p class="center-text uppercase">Blue notification!</p>
                    </div>    
                </div>
                <div class="clear"></div>
            </div>   

            <div class="decoration"></div>

            <div class="container no-bottom">  
                <h3 class="left-text">Left text.</h3>
                <p class="left-text">
                    This is a simple paragrahp aligned to the left side of the screen!
                    This is a simple paragrahp aligned to the left side of the screen!
                </p>

                <div class="decoration"></div>

                <h3 class="center-text">Center text.</h3>
                <p class="center-text">
                    This is a simple paragraph aligned to the center part of the screen!
                    This is a simple paragraph aligned to the center part of the screen!
                </p>

                <div class="decoration"></div>

                <h3 class="right-text">Right text.</h3>
                <p class="right-text">
                    This is a simple paragraph aligned to the right side of the screen!
                    This is a simple paragraph aligned to the right side of the screen!
                </p>
            </div>

            <div class="decoration"></div>

            <div class="container no-bottom">
               <h3>How about a table?</h3>
               <p>And it's pure CSS3! That means just fill in the data, and the table expands to fit the size you need!</p>
               <table cellspacing='0' class="table">
                    <tr>
                        <th>TABLE</th>
                        <th class="table-title">PLUS</th>
                        <th class="table-title">PRO</th>
                    </tr>
                    <tr>
                        <td class="table-sub-title"> ONE</td>
                        <td>Yes</td>
                        <td>Yes</td>
                    </tr>
                    <tr class='even'>
                        <td class="table-sub-title"> TWO</td>
                        <td>No</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td class="table-sub-title"> THREE</td>
                        <td>No</td>
                        <td>No</td>
                    </tr>
                    <tr class='even'>
                        <td class="table-sub-title">VALUE</td>
                        <td class="price">$9.<sup class="small-price">99</sup></td>
                        <td class="price">$109.<sup class="small-price">99</sup></td>
                    </tr>       
                </table>
            </div>  
            <div class="decoration"></div>
            
        </div>
        <!-- Page Footer-->
        <div class="footer">
            <p class="center-text">Copyright 2015. All rights reserved.</p>
            <div class="footer-socials half-bottom">
                <a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
                <a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
                <a href="#" class="footer-transparent"></a>
                <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
                <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
            </div>
        </div>    
        
    </div>
    
    <div class="share-bottom">
        <h3>Share Page</h3>
        <div class="share-socials-bottom">
            <a href="">
                <i class="fa fa-facebook facebook-color"></i>
                Facebook
            </a>
            <a href="">
                <i class="fa fa-twitter twitter-color"></i>
                Twitter
            </a>
            <a href="">
                <i class="fa fa-google-plus google-color"></i>
                Google
            </a>

            <a href="">
                <i class="fa fa-pinterest-p pinterest-color"></i>
                Pinterest
            </a>
            <a href="sms:">
                <i class="fa fa-comment-o sms-color"></i>
                Text
            </a>
            <a href="">
                <i class="fa fa-envelope-o mail-color"></i>
                Email
            </a>
        </div>
        <a href="#" class="close-share-bottom">Close</a>
    </div>
    
</div>

</body>

